<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>违章查询</title>
<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
<script src="<%=basePath%>bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/common.js"></script>
<script type="text/javascript" src="<%=basePath%>js/lhgdialog.min.js?self=true&skin=iblack"></script>
<link href="<%=basePath%>bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript">
	var pc_info;

	function getCitys(p_code) {
		for ( var index in pc_info) {
			if (pc_info[index].province_code == p_code) {
				return pc_info[index].citys;
			}
		}
		return undefined;
	}

	function loadCitys() {
		var city_selector = $("#citys");
		var p_code = $("#provinces").val();
		if (p_code == '0') {
			city_selector.empty();
			city_selector.append("<option value='0'>选择城市</option>");
			return;
		}
		city_selector.empty();
		city_selector.append("<option value='0'>选择城市</option>");
		$(getCitys(p_code)).each(function(i, item) {
			city_selector.append("<option value='" + item.city_code + "'>" + item.city_name + "</option>");
		});
	}

	function query() {
		var city = $("#citys").val();
		var type = $("#hpzl").val();
		var plate = $("#plate").val();
		var eng = $("#engineno").val();
		$.post(getRootPath() + "/query.k", {
			city : city,
			type : type,
			plate : plate,
			eng : eng
		}, function(result) {
			console.log(result);
			if (result.operationState == 'SUCCESS') {
				var result_ = $("#query_result");
				result_.empty();
				result.data.result.lists.length == 0 ? showMessage("没有违章记录", 5) : $(result.data.result.lists).each(
						function(i, item) {
							result_.append("<tr><td>" + item.code + "</td><td>" + item.date + "</td><td>" + item.area + "</td><td>" + item.act + "</td><td>" + item.fen
									+ "</td><td>" + item.money + "</td><td>" + item.handled + "</td></tr>");
						});
			} else {
				showMessage(result.data.reason);
			}
		}, "json");
	}
	$(function() {
		$.post(getRootPath() + "/citys.k", {}, function(result) {
			if (result.operationState == 'SUCCESS') {
				pc_info = result.data.result;
				var pro_selector = $("#provinces");
				pro_selector.empty();
				pro_selector.append("<option value='0'>选择省份</option>");
				$(result.data.result).each(function(i, item) {
					pro_selector.append("<option value='" + item.province_code + "'>" + item.province + "</option>");
				});
			} else {
				showMessage(result.data.reason);
			}
		}, "json"); //加载省市信息
		$.post(getRootPath() + "/types.k", {}, function(result) {
			if (result.operationState == 'SUCCESS') {
				var hpzl_selector = $("#hpzl");
				hpzl_selector.empty();
				hpzl_selector.append("<option value='0'>选择车辆种类</option>");
				$(result.data.result).each(function(i, item) {
					hpzl_selector.append("<option value='" + item.id + "'>" + item.car + "</option>");
				});
			} else {
				showMessage(result.data.reason);
			}
		}, "json");
		$("#provinces").on('change', loadCitys); // 省市级联
	});
</script>
<style type="text/css">
body {
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
}

.sp {
	margin-top: 3px;
}
</style>
</head>
<body>
	<div class="sp"></div>
	<div class="row">
		<div class="col-lg-4">
			<select id="provinces" class="form-control">
				<option value='0'>选择省份</option>
			</select>
		</div>
		<div class="col-lg-4">
			<select id="citys" class="form-control">
				<option value='0'>选择城市</option>
			</select>
		</div>
		<div class="col-lg-4">
			<select id="hpzl" class="form-control">
				<option value="0">选择车辆种类</option>
			</select>
		</div>
	</div>
	<div class="sp"></div>
	<div class="input-group">
		<span class="input-group-addon">车牌号码</span> <input id="plate" type="text" class="form-control" placeholder="请输入车牌号">
	</div>
	<div class="sp"></div>
	<div class="input-group">
		<span class="input-group-addon">发动机号</span> <input id="engineno" type="text" class="form-control" placeholder="请输入发动机号">
	</div>
	<div class="sp"></div>
	<button class="btn btn-sm btn-primary" onclick="query();" style="min-width: 125px;">提交</button>
	<div class="sp"></div>
	<table class="table table-striped table-bordered table-hover table-condensed">
		<caption>查询结果</caption>
		<thead>
			<tr>
				<td>编号</td>
				<td>时间</td>
				<td>地点</td>
				<td>描述</td>
				<td>扣分</td>
				<td>罚款</td>
				<td>状态</td>
			</tr>
		</thead>
		<tbody id="query_result">
		</tbody>
	</table>
</body>
</html>
